import advView from "@/adv.ejs";
import axios from "../api/index";
let baseURL = axios.defaults.baseURL;
console.log(baseURL);

// getadvdata函数
async function getadvdata(res, p = 1) {
  let { data } = await axios.get("/adv/getadvdata", {
    params: { p },
  });
  console.log(data);
  res.render(advView({ advs: data.advs, baseURL, pageCount: data.pageCount }));
}

// 绑定事件的函数
async function addEvent(res) {
  /* 一、添加广告按钮 */
  // 1.点击添加广告按钮的时候，弹出编辑框
  let addAdvBtn = document.querySelector(".addadv");
  // 获取添加的对话框
  let addAdvmodelEle = document.querySelector(".adduermodel");
  // 遮罩层元素
  let maskEle = document.querySelector(".mask");
  addAdvBtn.onclick = function () {
    console.log("点击了");
    // 点击添加按钮的时候  让对话框和 遮罩层显示出来
    addAdvmodelEle.style.display = "block";
    maskEle.style.display = "block";
  };

  /* 二、关闭弹窗按钮 */
  let closebtnEle = document.querySelector(".closebtn");
  closebtnEle.onclick = function () {
    addAdvmodelEle.style.display = "none";
    maskEle.style.display = "none";
  };

  /* 三、提交按钮 */
  let imgFileEle = document.querySelector(".imgFile");
  let imgshowEle = document.querySelector(".imgshow");
  // 图片内容的处理
  imgFileEle.onchange = function () {
    // input 发生改变的时候触发函数；
    console.log("发生改变了!!");
    //  获取到添加的图片
    let imgOBj = this.files[0];
    //  把图片转成url形式的数据，base64格式
    let filereader = new FileReader();
    filereader.readAsDataURL(imgOBj);
    // 在filereader读完数据之后，获取到base64的数据，将图片显示到页面上
    filereader.onload = function () {
      // 读取完毕了，获取base64字符串
      console.log(filereader.result);
      // 创建一个img 标签
      let myimg = new Image();
      // 设置图片的路径地址是获取到的base64的路径
      myimg.src = filereader.result;
      myimg.style.width = "100px";
      // 将图片的对象添加到html里面,添加之前要把之前添加过的图片清空
      imgshowEle.innerHTML = "";
      imgshowEle.appendChild(myimg);
    };
  };

  // 点击提交按钮的时候发送ajax
  let submitBtn = document.querySelector(".btn");
  let advnameEle = document.querySelector(".inputstyle");
  submitBtn.onclick = async function () {
    let advname = advnameEle.value;
    // 获取图片对象
    let imgfile = imgFileEle.files[0];

    // 表单的校验
    if (advname == "") {
      return alert("广告名不能为空");
    }
    // 图片不能是undefined
    if (typeof imgfile == "undefined") {
      return alert("图像不能为空");
    }
    console.log(advname, imgfile);

    // 借助 FormData 预定义类
    let form = new FormData(); //模拟一个空的form表单
    form.append("advname", advname);
    form.append("myimg", imgfile);
    console.log(form);
    // 把form当成数据直接提交给后端 ，自动设置请求头部信息
    let { data } = await axios.post("/adv/addadv", form);

    if (data.status == 1) {
      // 需要把对话框隐藏起来
      alert("添加成功");
      addAdvmodelEle.style.display = "none";
      maskEle.style.display = "none";
      await getadvdata(res);
      await addEvent(res);
    }
  };

  // 删除
  let delBtns = document.querySelectorAll(".delBtn");
  delBtns.forEach((btn) => {
    btn.onclick = async function () {
      let _id = this.getAttribute("myid");
      let reslut = confirm("你确定要删除吗?");
      if (reslut) {
        let { data } = await axios.delete("/adv/deladv", {
          params: {
            _id,
          },
        });
        if (data.status == 1) {
          await getadvdata(res);
          await addEvent(res);
        } else {
          console.log(data);
        }
      }
    };
  });

  let pageEles = document.querySelectorAll(".pageContainer a");

  pageEles.forEach((pageEle) => {
    pageEle.onclick = async function (e) {
      // 阻止 a的默认跳转行为
      e.preventDefault();

      // 获取当前点击的页码 ；
      let p = this.innerHTML;
      p = p.trim();
      console.log("(" + p.trim() + ")");
      await getadvdata(res, p);
      await addEvent(res);
    };
  });
}

export default function (router) {
  router.route("/admin/adv", async (req, res) => {
    // res.render(advView());
    await getadvdata(res);
    console.log(888)
    await addEvent(res);
  });
}
